import useAppStore from "@renderer/store/useAppStore"
import TaskItem from "./TaskItem"

export default function TaskList() {
  const tasks = useAppStore(state => state.tasks)
  if (tasks.length <= 0) {
    return (
      <div className="border abs-full m-6 rounded-xl border-dashed flex items-center justify-center font-bold text-white/70 text-center px-6 tracking-wider">
        拖拽PNG/JPG/WEBP文件到这里开始压缩
      </div>
    )
  }
  return (
    <div className="abs-full !top-4 !bottom-4 overflow-x-hidden overflow-y-auto custom-scrollbar">
      {tasks.map(task => (
        <TaskItem key={task.id} task={task}/>
      ))}
    </div>
  )
}